<template>
    <section class="collect_wen_jian_form">
  		
  		
  		<el-form ref="form" :model="wenjianForm" label-width="106px" class="second_form">
 				<el-form-item :label="compunteLabel" required >
 						<el-radio-group v-model="wenjianForm.wenjianType" @change="changewenjianType">
						     <el-radio-button class="box-radio" label="FTP"></el-radio-button>
						     <el-radio-button class="box-radio" label="文件目录"></el-radio-button>
						</el-radio-group>
 				</el-form-item>
 				
 				   <el-form-item label="FTP数据源" required v-show="showWenjianType==='FTP'">
					   <el-select filterable  v-model="form.connDatasourceId"  placeholder="请选择">
					    <el-option
					      v-for="item in FTPData"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					  </el-select>
					  <i class="el-icon-circle-plus-outline icon_diy" ></i>
					</el-form-item>
 					
 					<el-form-item label="文件目录">
					    <el-input v-model="form.filePath" placeholder="100字以内"></el-input>
					</el-form-item>
					
					
					<el-form-item label="指定文件" required  v-if="inputOrOutput==='laiyuan'">
						<el-radio class="first_radio" v-model="wenjianForm.specifyFileType" label="1" @change="zhidingWj='1'">指定文件类别</el-radio>
  						<el-radio class="first_radio" v-model="wenjianForm.specifyFileType" label="2" @change="zhidingWj='2'">指定文件名</el-radio>
					
						<el-input v-show="zhidingWj==='1'" v-model="wenjianForm.specifyValue" placeholder="输入要采集文件的通配规则"></el-input>
						<el-input v-show="zhidingWj==='2'" v-model="wenjianForm.specifyValue" placeholder=" 输入要采集文件名"></el-input>
					</el-form-item>
					
					<el-form-item label="采集方式" required  v-if="inputOrOutput==='laiyuan'">
						<el-radio class="first_radio" v-model="wenjianForm.gatherMode" label="1">增量采集</el-radio>
  						<el-radio class="first_radio" v-model="wenjianForm.gatherMode" label="2" >全部采集</el-radio>
					</el-form-item>
					
					<el-form-item label="保存的文件类型 " required  v-if="inputOrOutput==='mudi'">
						<el-radio class="first_radio" v-model="wenjianForm.outFileType" label="csv">CSV文件</el-radio>
  						<el-radio class="first_radio" v-model="wenjianForm.outFileType" label="json" >JSON</el-radio>
  						<el-radio class="first_radio" v-model="wenjianForm.outFileType" label="xml">XML</el-radio>
  						<el-radio class="first_radio" v-model="wenjianForm.outFileType" label="txt" >TXT</el-radio>
					</el-form-item>
					
					
					<el-form-item label="保存文件命名规则" v-if="inputOrOutput==='mudi'">
					    <el-input v-model="form.fileSaveNameRule" placeholder="请输入名称的通配规则"></el-input>
					</el-form-item>
					
					<!--数据匹配表格-->
					<el-form-item label="数据匹配" v-if="inputOrOutput==='laiyuan'"></el-form-item>
						<el-table
							:data="wenjianFormTable1Data"
							style="width: 100%;"
							 v-if="inputOrOutput==='laiyuan'"
						>
						 		<el-table-column
								       	align="center"
								       	label="列"
								       	>
								      <template slot-scope="scope">
								      	  <span>第{{ Number(scope.$index)+1}}列</span>
								      </template>
								</el-table-column>	
								
								<el-table-column
								       	align="center"
								       	label="中文名"
								       	>
								      <template slot-scope="scope">
								      	<el-input v-model="scope.row.chineseName"></el-input>
								      </template>
								</el-table-column>	
							
								
								<el-table-column
								       	align="center"
								       	label="对应的元数据"
								       	>
								      <template slot-scope="scope">
								      		<el-select v-model="scope.row.yuanData" placeholder="请选择" @change="chooseYuanData" style="width: 160px;">
											    <el-option
											      v-for="item in wenjianFormYuanDataOptions"
											      :key="item.id"
											      :label="item.name"
											      :value="item.id">
											    </el-option>
											</el-select>
											<i class="el-icon-circle-plus-outline" style="width: 10px;font-size: 18px;"></i>
								      </template>
								</el-table-column>
								
								<el-table-column
								       	align="center"
								       	label=""
								       	style="width: 50px;"
								       	>
									      <template slot-scope="scope" style="width: 50px;">
									      	<span><i class="el-icon-delete"></i></span>
									      </template>
								</el-table-column>
						 </el-table>
						 <el-button  v-if="inputOrOutput==='laiyuan'" type="primary" @click="addWenjianFormTable1Data" style="margin-top: 20px;">添加</el-button>
					
        </el-form>
        
    </section>
</template>

<script>
    import {
    	componentGetFTPData,
    	componentGetYuanData2Type
    } from "../../common/js_css_img/serverResourceComputed"
    export default {
    	props:{
    		timeSubmit :Boolean,
    		inputOrOutput:'',
    		resourceWeb:Number,
    	},
        data() {
          return {
          	zhidingWj:'',
          	showWenjianType:'',
          	wenjianForm:{
          		specifyFileType:'',
          		specifyValue:'',
          		gatherMode:'',
          		outFileType:'',
          	},
          	form:{/*文件这个表单的输入与输出都是这段*/
						"type":2  
						,"connDatasourceId":''
					    ,"filePath":""
					    ,"fileName":"文件"
					    ,"sql":''
					    ,"fileSaveNameRule":''
						,"outputDataFormList":[],
						"inputDataFormList":[]
          	},
          	FTPData:[],
          	wenjianFormTable1Data:[],/*输入的*/
          	wenjianFormYuanDataOptions:[],
          };
        },
        methods: {
        		chooseYuanData(val){
        			console.log(val);
        			console.log(this.wenjianFormYuanDataOptions);
        			if(this.inputOrOutput==='laiyuan'){
        				/*插入到vuex，为下面去领取*/
        				let pushYuanData = this.forYuanData(val);
        				this.$store.commit('pushYuanData', pushYuanData);
        				console.log(this.$store.state.collectServer.yuanData);
        			}
        		},
        		changewenjianType(val){
        			this.showWenjianType =val;
        			if(val==='2'){
        				componentGetFTPData(this,2,this.resourceWeb);/*ftp数据源*/
        			}
        		},
        		addWenjianFormTable1Data(){
        			this.wenjianFormTable1Data.push(
        				{
          					chineseName:"",
          					yuanData:'',
          				}
        			)
        		},
        		forYuanData(val){/*循环挑选元数据*/
        			let param={};
        			for(let i in this.wenjianFormYuanDataOptions){
        				if(this.wenjianFormYuanDataOptions[i].id ===val){
        					param = this.wenjianFormYuanDataOptions[i];
        					break;
        				}
        			}
        			return param
        		}
        },
        computed:{
        	compunteLabel(){
        		if(this.inputOrOutput==='laiyuan'){
        			return "选择文件类型"
        		}
        		if(this.inputOrOutput==='mudi'){
        			return "文件保存到"
        		}
        	}
        },
        watch:{
        	timeSubmit(newVal){/*处理和提交表单*/
        		if(this.inputOrOutput==='laiyuan'){
	        		for (let i in this.wenjianFormTable1Data){
	        			this.form.outputDataFormList.push(
	        				{
	        					"key":Number(i)+1,
	        					"name":this.wenjianFormTable1Data[i].chineseName,
	        					"metaDataId" :this.wenjianFormTable1Data[i].yuanData,
	        				}
	        			)
	        		}
        		}
        		
//      		if(this.inputOrOutput==='mudi'){
//      			
//      		}
        		this.$emit('outPutForm',{form:this.form,secondForm:this.wenjianForm});
        	},
        	resourceWeb(newVal){
        			componentGetFTPData(this,2,newVal);/*ftp数据源*/
        	},
        	inputOrOutput(newVal){
        		if(newVal==='laiyuan'){
        			componentGetYuanData2Type(this,{},1);/*获取采集类的元数据*/
        		}else if(newVal==='mudi'){
        			this.wenjianFormYuanDataOptions = this.$store.state.collectServer.yuanData;
        		}
        	}
        	
        },
        mounted(){
        	if(this.inputOrOutput==='laiyuan'){
        			componentGetYuanData2Type(this,{},1);/*获取采集类的元数据*/
        	}else if(this.inputOrOutput==='mudi'){
        			this.wenjianFormYuanDataOptions = this.$store.state.collectServer.yuanData;
        	}
        }
  };
</script>

<style scoped="scoped">
    
</style>